<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="./tx.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
    <link rel="stylesheet" href="./iconfont.css"/>
    <link rel="stylesheet" href="./index.css"/>
    <title>love website</title>
</head>
<body>

    <!--<audio controls>-->
    <!--    <source src="music/如果我们.mp3">-->
    <!--</audio>-->

    <div class="header">

        <div class="top">
            <div class="logo">
                We Love
            </div>
            <div class="motto">
                那就在一起，黄昏与四季
            </div>
        </div>

        <div class="pane animate__animated animate__pulse">
            <div class="avatar-area man" onclick="clickMan()">
                <img src="./img/me.jpg" class="avatar">
                <p class="nick-name">狠穿</p>
            </div>

            <div class="center-area">
                <img src="./img/love.png" class="love">
            </div>
           
           
            <div class="avatar-area woman" onclick="clickWoman()">
                <img src="./img//she.jpg" class="avatar">
                <p class="nick-name">只吃半斤</p>
            </div>

        </div>

    </div>

    <div class="body">
        
        <!-- 恋爱时长区域 -->
        <div class="love-days">
            <h5 class="title">这是我们一起走过的</h5>
            <div class="detail">
                <span class="number">17</span> <span class="unit">天</span>
                <span class="number">16</span> <span class="unit">时</span>
                <span class="number">57</span> <span class="unit">分</span>
                <span class="number second">12</span> <span class="unit">秒</span>
            </div>
        </div>

        <!-- 图片 -->
        <div class="images row">
            <div class="col-md-3 col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img class="image" src="./img/meng1.jpg">
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img class="image" src="./img/meng2.jpg">
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img class="image" src="./img/meng1.jpg">
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-12">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <img class="image" src="./img/meng2.jpg">
                    </div>
                </div>
            </div>
        </div>

       
        

    </div>
</body>

<script>
    setInterval(function(){
        document.querySelector('.second').innerText = new Date().getSeconds();
    },1000)
</script>

</html>